<template>

  <div>
    <div class="w">
      <!-- 标题 -->
      <div class="title-area">
        <span>
          评测用例新增
        </span>
      </div>

      <!-- 主体内容显示区 -->
      <div class="content-area">

        <!-- 查询表单区 -->
        <div class="form-area">
          <Form style="margin-top: 35px;" 
            name="form" 
            ref="form" 
            :labelCol="labelCol" 
            :wrapperCol="wrapperCol" 
            :initialValues="{}">

            <Row>
              <Col :span="12" :offset="5">
                <FormItem name="code" label="用例代码">
                  <Input style="width: 100%" disabled />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col :span="12" :offset="5">
                <FormItem name="name" label="用例名称">
                  <Input placeholder="请输入用例名称" style="width: 100%" />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col :span="12" :offset="5">
                <FormItem name="type" label="用例类型">
                  <Select placeholder="请选择用例类型" style="width: 100%" allowClear>
                      <Option key="1" value="pressure" label="压力测试" />
                      <Option key="2" value="function" label="功能测试" />
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col :span="12" :offset="5">
                <FormItem name="desc" label="用例描述">
                  <Input placeholder="请输入用例描述" style="width: 100%" />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col :span="12" :offset="5">
                <FormItem name="env" label="适用场景">
                  <Input placeholder="请输入适用场景" style="width: 100%" />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col :span="12" :offset="5">
                <FormItem name="input" label="输入">
                  <Input placeholder="请输入内容" style="width: 100%" />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col :span="12" :offset="5">
                <FormItem name="output" label="期待输出">
                  <Input placeholder="请输入期待输出" style="width: 100%" />
                </FormItem>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
    </div>

    <div class="w" style="margin-top: 5px;">
      <!-- 标题 -->
      <div class="title-area">
        <span>
          用例脚本
        </span>
      </div>

      <!-- 主体内容显示区 -->
      <div class="content-area">
        <Table
          style="margin-top: 20px"
          :columns="tableColumns"
          :dataSource="tableData"
          :bordered="false"
          :rowKey="(record) => record.key"
          :pagination="false">
        </Table>

        <Row style="margin-top: 40px;">
          <Col :span="12" :offset="9">
              <Button style="width: 100px;" type="primary" @click="submit">提 交</Button>
              <Button style="width: 100px; margin-left: 20px;" @click="cancel">取 消</Button>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: "app",
    data: function () {
      return {
          labelCol: {
            span: 8
          },
          wrapperCol: {
            span: 15
          },
          options: [
              {
                value: 'kb',
                label: '金仓股份有限公司',
                children: [
                    { value: 'v1', label: 'v1.0 企业版' },
                    { value: 'v2', label: 'v2.0 企业版' },
                    { value: 'v1s', label: 'v1.0 安全版' }
                ]
              },
              {
                value: 'dm',
                label: '达梦股份有限公司',
                children: [
                    { value: 'v1', label: 'v1.0 企业版' },
                    {  value: 'v2', label: 'v2.0 企业版' }
                ]
              },
              {
                value: 'hg',
                label: '瀚高基础软件',
                children: [
                    { value: 'v1', label: 'v1.0 企业版' },
                    { value: 'v1s', label: 'v1.0 安全版' }
                ]
              }
          ],
        tableData: [
          { "id":"1", "name":"migration_test.sql", "desc":"迁移测试用例脚本...", "attachment":"数据库安全版开发手册.doc", "readme":"用例脚本说明...", "operation":"删除" },
          { "id":"2", "name":"migration.sql", "desc":"迁移用例脚本...", "attachment":"数据库企业版开发手册.doc", "readme":"用例脚本说明...", "operation":"删除" },
          { "id":"3", "name":"data.sql", "desc":"数据用例脚本...", "attachment":"数据库安全版开发手册.doc", "readme":"用例脚本说明...", "operation":"删除" },
          { "id":"4", "name":"bigdata.sql", "desc":"大数据用例脚本...", "attachment":"数据库安全版开发手册.doc", "readme":"用例脚本说明...", "operation":"删除" },
        ],
        tableColumns: [
          {"title":"编号", "dataIndex":"id", "key":"id", width: 60},
          {"title":"脚本名称", "dataIndex":"name", "key":"name"},
          {"title":"脚本描述", "dataIndex":"desc", "key":"desc"},
          {"title":"附件", "dataIndex":"attachment", "key":"attachment"},
          {"title":"说明", "dataIndex":"readme", "key":"readme"},
          {"title":"操作", "dataIndex":"operation", "key":"operation", width: 60},
        ],
      }
    },
    methods: {
        submit: function () {
            console.log("Submit...");
        },
        cancel: function () {
            this.$router.push('/caseMgr');
        }
    }
}
</script>

<style scoped>
  .w {
    /* height: 100%; */
    background-color: #F9FAFB;
  }

  /* 标题 */
  .title-area {
    height: 36px;
    background-color: #E9EBF0;
  }
  .title-area span {
    display: inline-block;
    font-weight: 500;
    line-height: 36px;
    margin-left: 15px;
  }

  /* 主体内容显示区 */
  .content-area {
    /* background-color: lightblue; */
    height: 100%;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 15px;
  }

  /* 查询表单区 */
  .form-area {
    /* background-color: lightcyan; */
    margin-left: 50px;
    margin-right: 50px;
  }
  .formGrid {
    /* background-color: orange; */
    margin-top: 15px;
    height: 35px;
    line-height: 35px;
  }

  .uni-divider {
    margin: 0;
  }

  /* 按钮区 */
  .button-area {
    margin-top: 15px;
    /* background-color: lightcyan; */
  }
  .button-area svg {
    margin-top: 3px;
    margin-right: 5px;
  }

  /* 列表区 */
</style>

